<template>
  <div class="container" v-if="isRefresh">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <detailHeader
      v-if="operation == 'detail'"
      :infoList="infoList"
      :status="
        detailData.status === 'AUDIT'
          ? 1
          : detailData.status === 'REJECT'
          ? 3
          : 2
      "
      :showStatusDesc="detailData.showStatusDesc"
      :showCancel="
        detailData.showStatus === 'CANCLE' && detailData.status === 'APPROVED'
      "
      :showCancelBtn="detailData.showStatus == 'CANCLE'"
      :showPicStatus="detailData.showStatus"
      @handleBack="dialogFormVisible = true"
    ></detailHeader>
    <div class="mainCon">
      <!-- <el-col
        :span="24"
        :class="[
          'checkStatus',
          'clearfix',
          {
            audit: detailData.status === 'AUDIT',
            reject: detailData.status === 'REJECT',
            approved: detailData.status === 'APPROVED',
          },
          {
            CANCLE:
              detailData.showStatus == 'CANCLE' &&
              detailData.status === 'APPROVED',
          },
        ]"
        v-if="operation == 'detail'"
      >
        <div class="statusCon fl">
          <div class="fl">
            <span
              :class="[
                'icon',
                'iconfont',
                {
                  icondengdai: detailData.status === 'AUDIT',
                  iconshibai1: detailData.status === 'REJECT',
                  iconyiqueren: detailData.status === 'APPROVED',
                },
              ]"
            ></span>
          </div>

          <div class="statusBox">
            {{ detailData.statusDesc }}
            <div class="remark">
              <span v-if="detailData.status !== 'AUDIT'" class="fl"
                >审核人：{{ detailData.operatorName || "--" }}</span
              >
              <span v-if="detailData.status !== 'AUDIT'" class="fl"
                >审核时间：{{ detailData.operationDate || "--" }}</span
              >
              <span v-if="detailData.status === 'AUDIT'" class="fl"
                >申请日期：{{ detailData.applicationDate || "--" }}</span
              >
              <span class="fl">申请账号：{{ detailData.applicant || "--" }}</span>
              <span v-if="detailData.status === 'REJECT'" class="reason" :title="detailData.reason"
                >驳回原因：{{ detailData.reason || "--" }}</span
              >
              
            </div>
          </div>
          <div class="img" v-if="detailData.status !== 'REJECT'">
            <img
              v-if="detailData.showStatus == 'PUBLIC'"
              src="../../../static/img/worker/PUBLIC.png"
              alt=""
            />
            <img
              v-if="detailData.showStatus == 'NOT_PUBLIC'"
              src="../../../static/img/worker/NOT_PUBLIC.png"
              alt=""
            />
          </div>
        </div>
        <div
          class="publicStatus"
          v-if="
            detailData.showStatus === 'CANCLE' &&
            detailData.status === 'APPROVED'
          "
        >
          <span>
            {{ detailData.showStatusDesc }} <br /> 
            <el-link
              type="primary"
              @click="reason"
              v-if="detailData.showStatus == 'CANCLE'"
              >撤销原因</el-link
            >
          </span>
        </div>
      </el-col> -->
      <el-row
        class="secondLevelTitleStyle fontBorderTheme"
        style="margin-top: 0"
        v-if="operation == 'edit'"
      >
        不良信息记录
      </el-row>
      <recordDetail :detailData="detailData" :type="type"></recordDetail>
      <!-- 审核按钮 -->
      <el-row class="btnBox" v-if="operation == 'audit'">
        <el-button
          size="medium"
          class="saveBtn submitBtn"
          @click="toAudit()"
          :loading="canSubmit"
          >审核通过</el-button
        >
        <el-button
          size="medium"
          class="cancelBtn rejectFrom"
          @click="toReject()"
          >驳回</el-button
        >
        <el-button size="medium" class="cancelBtn" @click="goBack()"
          >取消</el-button
        >
      </el-row>
      <!-- 撤销原因弹窗 -->
      <el-dialog
        title="撤销原因"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        :show-close="true"
        width="750px"
        :modal-append-to-body="false"
        :append-to-body="true"
      >
        <div class="dialogContent">
          {{ detailData.reason }}
        </div>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button @click="cancelDialog" class="cancel">取 消</el-button>
          <el-button type="primary" class="save" @click="affirm"
            >确 认</el-button
          >
        </div> -->
      </el-dialog>
      <!-- 编辑 -->
      <el-row
        class="secondLevelTitleStyle fontBorderTheme"
        v-if="operation == 'edit' && type == 'BAD'"
      >
        公示信息
      </el-row>
      <div class="editComp" v-if="operation == 'edit'">
        <div class="editCompTitle fontColorTheme">编辑公示信息</div>
        <el-form
          :model="info"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-row class="row-padding-bottom">
            <el-col :span="12" class="col-position">
              <el-form-item label="公示状态" prop="peopleCount">
                <el-radio-group
                  v-model="formData.showStatus"
                  :disabled="isProjectDisabled"
                  @change="changeIsPublic"
                  class="noticeStatus"
                >
                  <el-radio :label="1">开启公示</el-radio>
                  <el-radio :label="0">关闭公示</el-radio>
                </el-radio-group>
                <el-link
                  type="primary"
                  @click="showRecord"
                  style="margin-left: 24px"
                  >查看操作记录</el-link
                >
              </el-form-item>
            </el-col>
            <el-col :span="12" class="col-position" v-show="isShowDeadline">
              <el-form-item label="公示截止日" prop="occurrenceDate">
                <el-date-picker
                  v-model="formData.showEndDate"
                  type="date"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="editCompBtn">
          <el-button
            type="primary"
            v-sdc
            :loading="isLoading"
            class="commonBut saveBtn"
            @click="toEdit"
            >保存</el-button
          >
          <el-button type="default" v-sdc class="commonBut" @click="goBack"
            >取消</el-button
          >
        </div>
      </div>
      <!-- 公示信息操作记录弹窗 -->
      <el-dialog
        title="公示信息操作记录"
        :visible.sync="publicDialogFormVisible"
        :close-on-click-modal="false"
        :show-close="true"
        width="900px"
        :modal-append-to-body="false"
        :append-to-body="true"
      >
        <div class="dialogContent">
          <el-timeline class="timeline">
            <template v-if="creditlogList.length">
              <el-timeline-item
                v-for="(item, index) in creditlogList"
                :key="index"
                :timestamp="item.description"
              >
                操作时间：{{ item.operationDate || '--' }}
                <span style="margin-left: 24px"
                  >操作人：{{ item.operatorName || '系统' }}</span
                >
              </el-timeline-item>
            </template>
            <template v-else>
              <div class="noHandleData">
                <img
                  class="noDataImg"
                  src="../../../static/img/noData.png"
                  alt
                />
                <div class="text fS color999">暂无操作记录</div>
              </div>
            </template>
          </el-timeline>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import recordDetail from '@/components/worker/recordDetail'
import detailHeader from './detailHeader.vue'
export default {
  name: 'badRecordDetail',
  components: {
    recordDetail,
    detailHeader,
  },
  data() {
    return {
      titleText: '',
      back: true,
      info: {
        statusDesc: '待审核',
        status: 'AUDIT',
      }, //详情
      formData: {
        id: '',
        typeId: '', //事件类型（字典）
        accidentId: '', //事件原因（字典）
        accidentDate: '', //2019/11/19--事件发生日期
        address: '', //--事件发生地址
        accidentRank: '', //--事件级别（枚举：01-一般，05-严重，10-重大
        preciseTypeName: '', //事件类别
        involvedRangeId: '', //--涉案人数区间（字典）
        illustration: '', //--事件说明
        projectName: '', //--项目名称
        uscc: '', //--企业USCC
        companyName: '', //--企业名称
        industryId: '', //--行业ID
        areaId: '', //--1502区域Id
        file: [],
      },
      detailData: {},
      dialogFormVisible: false,
      type: '', //不良信息还是奖励信息
      // 编辑公示信息
      formData: {
        showStatus: '',
        showEndDate: '',
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        },
      },
      isShowDeadline: false,
      publicDialogFormVisible: false, //公示信息操作记录
      creditlogList: [],
      operation: '', //页面具体操作  audit，审核 ； edit 编辑  ；detail 查看
      isRefresh: true,
    }
  },

  created() {
    this.createdFun()
  },
  computed: {
    infoList() {
      var arr = []
      if (this.detailData.status == 'AUDIT') {
        arr = [
          { title: '申请日期', value: this.detailData.applicationDate },
          { title: '申请账号', value: this.detailData.applicant },
        ]
      } else if (this.detailData.status == 'REJECT') {
        arr = [
          { title: '审核人', value: this.detailData.operatorName },
          { title: '审核时间', value: this.detailData.operationDate },
          { title: '申请账号', value: this.detailData.applicant },
          { title: '驳回原因：', value: this.detailData.reason },
        ]
      } else {
        arr = [
          { title: '审核人', value: this.detailData.operatorName },
          { title: '审核时间', value: this.detailData.operationDate },
          { title: '申请账号', value: this.detailData.applicant },
        ]
      }
      return arr
    },
  },
  methods: {
    createdFun() {
      this.formData.id = this.$route.query.id
      this.type = this.$route.query.type
      this.operation = this.$route.query.operation
      if (this.type == 'BAD') {
        if (this.operation == 'edit') {
          this.titleText = '编辑不良记录'
        } else if (this.operation == 'audit') {
          this.titleText = '不良记录审核页'
        } else {
          this.titleText = '不良记录详情'
        }
      } else {
        this.titleText = '奖励记录详情'
      }

      this.getDetail(this.formData.id)
    },
    //获取详情
    getDetail() {
      this.axios({
        method: 'post',
        url: 'api-r/employee/creditrecord/detail',
        data: { id: this.$route.query.id },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.detailData = response.data.result
            if (this.operation == 'edit') {
              this.formData.showStatus = response.data.result.isShow
              this.formData.showEndDate = response.data.result.showEndDate
              this.changeIsPublic(this.formData.showStatus)
            }
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    // 审核通过
    toAudit() {
      this.$confirm('确认审核通过?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.audit()
        })
        .catch(() => {})
    },
    audit() {
      this.axios({
        method: 'post',
        url: 'api-r/employee/creditrecord/editstatus',
        data: {
          id: this.$route.query.id,
          status: 'APPROVED',
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '已审核通过',
                type: 'success',
              })
              // this.goBack();
              // this.$route.query.operation = "edit";
              if (this.type == 'BAD') {
                this.$router.push({
                  query: {
                    id: this.$route.query.id,
                    type: this.type,
                    operation: 'edit',
                  },
                })
                this.createdFun()
              } else {
                // this.goBack();
                this.$router.push({
                  query: {
                    id: this.$route.query.id,
                    type: this.type,
                    operation: 'detail',
                  },
                })
                this.createdFun()
              }
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 驳回
    toReject() {
      this.$prompt('驳回原因：', '驳回', {
        inputType: 'textarea',
        cancelButtonText: '取消',
        confirmButtonText: '确认驳回',
        inputPlaceholder: '请输入驳回原因，不超过200个字',
        inputPattern: /^.{1,200}$/,
        inputErrorMessage: '需填写驳回原因，不超过200个字符',
      })
        .then(({ value }) => {
          this.reject(value)
        })
        .catch(() => {
          //取消
        })
    },
    reject(value) {
      this.axios({
        method: 'post',
        url: 'api-r/employee/creditrecord/editstatus',
        data: {
          id: this.$route.query.id,
          status: 'REJECT',
          reason: value,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '驳回成功',
                type: 'success',
              })
              // if(this.type =="BAD"){
              this.$router.push({
                query: {
                  id: this.$route.query.id,
                  type: this.type,
                  operation: 'detail',
                },
              })
              this.createdFun()
              // }else{
              //   this.goBack();
              // }
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    goBack() {
      var url = ''
      if (this.type == 'BAD') {
        //不良记录
        url = '/home/worker/badRecord'
      } else {
        //奖励记录
        url = '/home/worker/rewards'
      }
      this.$router.push(url)
      this.$store.commit('GOBACK_NAME', {
        oldUrl: url,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    reason() {
      this.dialogFormVisible = true
    },
    affirm() {
      this.dialogFormVisible = false
    },
    cancelDialog() {
      this.dialogFormVisible = false
    },
    // 切换是否公示状态,不需要公示，不展示公示截止日期
    changeIsPublic(val) {
      if (val == '1') {
        this.isShowDeadline = true
      } else {
        this.isShowDeadline = false
      }
    },
    showRecord() {
      this.getCreditlog()
    },
    // 获取编辑记录
    getCreditlog() {
      this.axios({
        method: 'post',
        url: 'api-r/employee/creditlog/list',
        data: { creditRecordId: this.$route.query.id },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.publicDialogFormVisible = true
            this.creditlogList = response.data.result
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 1000,
            message: '保存失败',
            type: 'error',
          })
        })
    },
    validatorTime(value) {
      var myDate = new Date()
      var now = myDate.valueOf()
      var time = new Date(value).valueOf()
      if (now > time) {
        return true
      } else {
        return false
      }
    },
    toEdit() {
      console.log(this.validatorTime(this.formData.showEndDate))

      if (this.formData.showStatus == '1') {
        if (!this.formData.showEndDate) {
          this.$message({
            message: '请选择公示截止日期',
            type: 'warning',
          })
          return
        }
      } else if (
        this.formData.showStatus == '1' &&
        this.validatorTime(this.formData.showEndDate)
      ) {
        // 选择日期小于当前日期
        this.$message({
          message: '公示截止日期不能小于当前日期',
          type: 'warning',
        })
        return
      } else {
        this.formData.showEndDate = ''
      }
      this.axios({
        method: 'post',
        url: 'api-r/employee/creditrecord/editbymonitor',
        data: {
          id: this.$route.query.id,
          isShow: this.formData.showStatus,
          showEndDate: this.formData.showEndDate,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            this.goBack()
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 1000,
            message: '保存失败',
            type: 'error',
          })
        })
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .mainCon {
    padding-left: 24px;
    padding-right: 24px;
    height: calc(100% - 67px);
    color: #333;
    font-size: 14px;
  }
}
form.el-form.demo-formData {
  width: 100%;
  display: inline-block;
  text-align: left;
  .a_link {
    color: #00a0e9;
  }
  // table {
  //   width: 100%;
  //   border-top: 1px solid #d5dfe8;
  //   border-left: 1px solid #d5dfe8;
  //   td {
  //     padding: 14px 20px;
  //     border-bottom: 1px solid #d5dfe8;
  //     border-right: 1px solid #d5dfe8;
  //     color: #666;
  //   }
  //   .title {
  //     width: 177px;
  //     background-color: #f5f7fc;
  //     font-weight: 500;
  //     text-align: right;
  //     color: #333;
  //   }
  //   .general {
  //     color: #6dd400;
  //   }
  //   .import {
  //     color: #fa6400;
  //   }
  //   .serious {
  //     color: #e02020;
  //   }
  // }
}
.el-main .el-form-item {
  margin-bottom: 20px;
}

// 审核状态
.checkStatus {
  margin-bottom: 20px;
  position: relative;
  .statusCon {
    padding: 16px 24px;
    width: 100%;
    background: #f8f9fb;
    border: 1px solid #dbdbdb;
    .img {
      position: absolute;
      width: 113px;
      height: 86px;
      right: 48px;
      top: -6px;
    }
  }
  .publicStatus {
    padding: 16px 24px;
    width: 300px;
    background: #f8f9fb;
    border: 1px solid #dbdbdb;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    span {
      height: 18px;
      font-size: 18px;
      color: #3e5265;
      font-weight: 500;
      display: inline-block;
      margin-top: -4px;
    }
    .noPublic {
      color: #3e5265;
    }
  }
  .icon {
    font-size: 36px;
    // color: #67ACE4;
    display: block;
  }
  .statusBox {
    display: inline-block;
    margin-left: 12px;
    font-size: 18px;
    // color: #67ACE4;
    font-weight: 500;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    .remark {
      font-size: 14px;
      color: #333;
      // margin-top: 10px;
      span {
        margin-right: 40px;
      }
    }
  }
}

.CANCLE .statusCon {
  width: calc(100% - 310px);
}
// .audit,.reject{
//   .statusCon{
//     width: 100%;
//   }
// }
// 待审核
// .checkStatus.audit {
//   .icon {
//     color: #67ace4;
//   }
//   .statusBox {
//     color: #67ace4;
//   }
// }
// // 驳回
// .checkStatus.reject {
//   .icon {
//     color: #e02020;
//   }
//   .statusBox {
//     color: #e02020;
//   }
// }
// // 通过
// .checkStatus.approved {
//   .icon {
//     color: #009588;
//   }
//   .statusBox {
//     color: #009588;
//   }
// }

.btnBox {
  text-align: center;
  .rejectFrom {
    background-color: #3e5265;
    border-color: #3e5265;
    color: #fff;
    &:hover {
      background-color: #3e5265;
      border-color: #3e5265;
      color: #fff;
      opacity: 0.8;
    }
  }
}

// 编辑框样式
.editComp {
  border: 1px solid #dcdfe6;
  background-color: #f8f9fb;
  padding: 15px;
}

.editCompTitle {
  color: #265ffa;
  font-size: 14px;
  line-height: 30px;
  margin-bottom: 12px;
  font-weight: 500;
}

.editCompBtn {
  text-align: center;
  margin: 10px;
  button {
    width: 120px;
  }
}

.timeline /deep/ .el-timeline-item__timestamp {
  color: #303133;
}

.timeline /deep/ .el-timeline-item__content {
  color: #909399;
}

.reason {
  display: block;
  float: left;
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.el-radio__input.is-checked .el-radio__inner {
  background: #009588;
}
/deep/.noticeStatus {
  .el-radio__input.is-checked + .el-radio__label {
    color: #009588;
  }
  .el-radio__input.is-checked .el-radio__inner::after {
    background-color: #fff !important;
  }
  .el-radio__input.is-checked .el-radio__inner {
    background: #009588;
  }
}
.theme_default .noticeStatus {
  /deep/.el-radio__input.is-checked + .el-radio__label {
    color: #3189ea;
  }
  .el-radio__input.is-checked .el-radio__inner::after {
    background-color: #fff !important;
  }
  /deep/.el-radio__input.is-checked .el-radio__inner {
    background: #3189ea;
  }
}

// /deep/ .theme_default  {
//     .el-radio__input.is-checked .el-radio__inner{
//       background: #3189EA!important;
//     }
//   }

.theme_default .editCompTitle {
  color: #3189ea;
}
</style>
